<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 436px;"
      border
      row-key="id"
      @row-contextmenu="openMenu">
      <el-table-column
        prop="name"
        label="任务列表"
        width="180">
      </el-table-column>
      <el-table-column
        prop="site"
        label="采网址"
        width="65">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.site">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="采内容"
        width="65">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.content">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="publish"
        label="发布"
        width="60">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.publish">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="data"
        label="数据量"
        width="65">
        <template slot-scope="scope">
          <a href="javascript:;">{{scope.row.data}}</a>
        </template>
      </el-table-column>
    </el-table>
    <context-menu class="right-menu"
      :offset="menuOffset">
      <template v-slot:menuItem>
        <li>开始</li>
        <li>暂停</li>
        <li>停止</li>
        <li>编辑</li>
        <li>复制到剪切板</li>
        <li>删除</li>
      </template>
    </context-menu>
  </div>
</template>
<script>
import ContextMenu from '@/components/ContextMenu.vue'
export default {
  name: 'TreePage',
  components: {
    ContextMenu
  },
  data () {
    return {
      left: 0,
      top: 0,
      menuOffset: {
        offsetLeft: 0,
        offsetWidth: 0,
        clientX: 0,
        clientY: 0
      },
      tableData: [{
        id: 1,
        name: '任务1',
        site: false,
        data: 0,
        content: false,
        publish: false
      }, {
        id: 2,
        name: '任务1',
        site: false,
        data: 0,
        content: false,
        publish: false
      }, {
        id: 3,
        name: '任务分组',
        site: false,
        data: 0,
        content: false,
        publish: false,
        children: [{
          id: 31,
          name: '任务1',
          site: false,
          data: 0,
          content: false,
          publish: false
        }, {
          id: 32,
          name: '任务1',
          site: false,
          data: 0,
          content: false,
          publish: false
        }]
      }, {
        id: 4,
        name: '任务1',
        site: false,
        data: 0,
        content: false,
        publish: false
      }]
    }
  },
  watch: {
  },
  methods: {
    openMenu (row, column, e) {
      e.preventDefault()
      this.menuOffset.offsetLeft = this.$el.getBoundingClientRect().left // container margin left
      this.menuOffset.offsetWidth = this.$el.offsetWidth // container width
      this.menuOffset.clientX = e.clientX
      this.menuOffset.clientY = e.clientY
    }
  }
}
</script>
